import React, { Component } from 'react';
import * as d3 from 'd3';



class SVGIDMap extends Component {
  // eslint-disable-next-line no-useless-constructor
  constructor(props) {
    super(props);
    this.myInput = React.createRef();
  }

  // eslint-disable-next-line react/sort-comp
  render() {
    const { id } = this.props;

    return (
      <div ref={this.myInput} style={{ background: '#C0C0C0',padding: '15px 15px 15px 15px'}}>
         <div id={id} style={{ width: '100%', height: '100%',margin:'auto' }} />
      </div>
    );
  }

  componentDidUpdate() {
    const { svg,id,data } = this.props;
    this.drawsvg(svg,id,data);
  
  }

  componentDidMount() {
   
    const { svg,id,data } = this.props;
    this.drawsvg(svg,id,data);
  }

  drawsvg(svg,id,data){ 
    d3.html(svg)
    .then(svgData => { 
      if(data!=undefined&&data.length>0)
      {
      data.forEach(function(item){   
        let pKey = "#"+item.pointid; 
        if(item.type==1) 
        {
            
            d3.select(svgData).select(pKey).text(item.value);
        }
        else(item.type==2) 
        {
            d3.select(svgData).select(pKey).style("fill", item.value);
        }
            }
      )
          }


       let  svgImg= d3
       .select(svgData)
       .select('svg')
       .attr('width', '100%')
       .attr('height', '100%')
       .node();
    
       let svg_container_id = '#' +id;

       d3.select(svg_container_id).select("svg").remove();
       
       d3.select(svg_container_id)
        .node()
        .appendChild(svgImg);
    });
  }
}

export default SVGIDMap;
